<template>
	<xn-form-container
		:title="formData.id ? '编辑项目' : '新增项目'"
		:width="550"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-form-item label="所属产品" name="productCode">
				<ProductSelect v-model:value="formData.productCode" />
			</a-form-item>
			<a-form-item label="项目编号" name="projectCode">
				<a-input v-model:value="formData.projectCode" placeholder="请输入项目编号" allow-clear />
			</a-form-item>
			<a-form-item label="项目名称" name="projectName">
				<a-input v-model:value="formData.projectName" placeholder="请输入项目名称" allow-clear />
			</a-form-item>
			<a-form-item label="项目描述" name="projectDescription">
				<a-input v-model:value="formData.projectDescription" placeholder="请输入项目描述" allow-clear />
			</a-form-item>
			<a-form-item label="所属主管" name="belongDirector">
				<a-spin :spinning="optionLoading">
					<a-select
						:options="userOptions"
						mode="multiple"
						:field-names="{ label: 'name', value: 'id' }"
						placeholder="请选择所属主管"
						allow-clear
						v-model:value="formData.belongDirector"
						optionFilterProp="name"
					/>
				</a-spin>
			</a-form-item>
			<a-form-item label="所属小组" name="belongTeam">
				<a-spin :spinning="optionLoading">
					<a-select
						:options="userOptions"
						mode="multiple"
						:field-names="{ label: 'name', value: 'id' }"
						placeholder="请选择所属小组"
						allow-clear
						v-model:value="formData.belongTeam"
						optionFilterProp="name"
					/>
				</a-spin>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
	import { required } from '@/utils/formRules'
	import projectApi from '@/api/tjzy/project/projectApi'
	import ProductSelect from '@/components/Tjzy/Product/index.vue'
	import userApi from '@/api/sys/userApi'
	import orgApi from '@/api/sys/orgApi'

	//===============================================DATA====================================================
	const optionLoading = ref(false)
	// 默认是关闭状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const orgFilter = ref([]) //主管小组只提供分中心的用户选项，根据所属org筛选
	const userOptions = ref([])
	const userValue = ref({})
	//===============================================LIFE CYCLES====================================================
	//===============================================METHODS====================================================
	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		formData.value = {
			sortCode: 99
		}
		if (record) {
			formData.value = Object.assign({}, record)
			formData.value.belongDirector = record.belongDirector ? record.belongDirector.split(',') : []
			formData.value.belongTeam = record.belongTeam ? record.belongTeam.split(',') : []
		}
		getUserOptions()
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		visible.value = false
	}

	// 默认要校验的
	const formRules = {
		productCode: [required('请选择所属产品')],
		projectCode: [required('请输入项目编码')],
		projectName: [required('请输入项目名称')],
		projectDescription: [required('请输入项目描述')],
		belongDirector: [required('请选择所属主管')],
		belongTeam: [required('请选择所属小组')]
	}
	//===============================================REQUEST====================================================
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				const data = Object.assign({}, formData.value)
				data.belongDirector = data.belongDirector.join(',')
				data.belongTeam = data.belongTeam.join(',')

				if (formData.value.id) {
					projectApi.editProject(data).then(() => {
						onClose()
						emit('successful')
					})
				} else {
					projectApi.addProject(data).then(() => {
						onClose()
						emit('successful')
					})
				}
			})
			.catch(() => {})
	}

	//获取分中心所有组织
	const getOrgTree = async () => {
		await orgApi.orgTree().then((res) => {
			res[0].children.forEach((item) => {
				if (item.name === '电话交付中心') {
					orgFilter.value = item.children.map((item) => {
						return item.id
					})
					orgFilter.value.push(item.id)
				}
			})
		})
	}
	//所属主管和小组选项
	const getUserOptions = async () => {
		optionLoading.value = true
		const data = {
			current: 1,
			size: 1000,
			userStatus: 'ENABLE'
		}
		await getOrgTree()
		userApi.userPage(data).then((res) => {
			userOptions.value = res.records.filter((item) => {
				optionLoading.value = false
				return orgFilter.value.includes(item.orgId)
			})
		})
	}
	//===============================================OTHERS====================================================
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
